<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="../static/layui/layui.js"></script>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
    <script type="text/javascript" src="../static/js/lay-config.js"></script>
    <title>TableSelect</title>
    <style>
        .layui-table-cell {
            text-align: center;

            height: auto;

            white-space: normal;

        }

        .layui-table img {
            max-width: 300px
        }

        .goods-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin: -10px;
        }

        .layui-card {
            flex: 0 0 calc(25% - 20px);
            /* 25%宽度，减去margin和border的20px */
            text-align: center;
            margin: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            transition: box-shadow 0.3s ease-in-out;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .layui-card:hover {
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
        }

        .layui-card-img-top {
            width: 80%;
            /* 缩小图片宽度 */
            height: 300px;
            /* 调整图片高度 */
            object-fit: cover;
            margin: 20px auto;
            /* 上下留白 */
            border-radius: 10px;
            /* 圆润边角 */
        }

        .layui-card-body {
            padding: 0px;
        }

        .video-block {
            margin-right: 15px;
            /* 设置块之间的间隔 */
            margin-bottom: 15px;
            /* 设置块之间的间隔 */
            float: left;
            /* 设置浮动 */
            width: 23%;
            /* 设置块的宽度，确保每行有四个块 */
            position: relative;
            /* 设置相对定位，以便子元素使用绝对定位 */
        }

        .video-block img {
            width: 100%;
            /* 设置封面大小 */
            height: auto;
            /* 保持宽高比例 */
            cursor: pointer;
            /* 设置鼠标悬停样式为手型 */
        }

        .video-info {
            position: absolute;
            /* 设置绝对定位 */
            bottom: 0;
            /* 置于父元素底部 */
            left: 0;
            /* 置于父元素左侧 */
            width: 100%;
            /* 占满整个父元素宽度 */
            background-color: rgba(0, 0, 0, 0.7);
            /* 添加背景色，使文字更易读 */
            padding: 5px;
            /* 添加内边距，增加样式 */
            box-sizing: border-box;
            /* 设置盒模型为边框盒，防止宽度溢出 */
            display: none;
            /* 初始隐藏，仅在悬停时显示 */
        }

        .video-info p {
            color: #fff;
            /* 设置文字颜色为白色 */
            margin: 0;
            /* 移除默认的外边距 */
        }

        .video-title {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin: 5px 0;
            /* 调整标题的上下边距 */
        }

        .video-block:hover .video-info {
            display: block;
            /* 鼠标悬停时显示 */
        }

        .layui-container {
            margin: 0 auto;
            /* 设置容器水平居中 */
        }
    </style>
    <style>
         table {
        width: 70%;
        margin: 0 auto;
        /* 设置表格宽度为70%，并水平居中 */
        border-collapse: collapse;
        /* 设置边框重叠样式，避免出现间隙 */
    }
        .label-1 {
            padding: 10px;
            text-align: center;
            border: 1px solid #ddd;
        }
        .label-2 {
            padding: 10px;
            text-align: center;
            border: 1px solid #ddd;
        }
    </style>
</head>

<body>
    <div class="layui-row" style="background-image: url('../static/head_background.png'); background-size: cover;">
        <div class="layui-col-md1">
            <a href="/">
                <img src="../static/logo.png" class="layui-logo" style="height:55px; width: 120px;">
            </a>
        </div>

        <div class="layui-col-md8" action="" style="padding:11px">
            <!-- 添加搜索框 -->
            <div class="layui-input-inline" action="" style="width:850px">
                <input type="text" id="searchInput" placeholder="请输入" class="layui-input">
            </div>
            <button class="layui-btn" id="searchBtn">
                <i class="layui-icon layui-icon-search"></i>
            </button>
        </div>
        <div class="layui-col-md3">
            <ul class="layui-nav" style="padding: 0px; bottom: 3px; background-color: transparent;">
                <li class="layui-nav-item">
                    <a href="/user/car" style="color: gray;">关注</a>
                </li>
                <li class="layui-nav-item">
                    <a href="/chat" style="color: gray;">投稿</a>
                </li>
                <li class="layui-nav-item">
                    <a href="/user/car" style="color: gray;">消息<span id="cart-badge" class="layui-badge">0</span></a>
                </li>
                <li class="layui-nav-item">
                    <a href="/v1/personal" style="color: gray;"><img src="../static/gou.png" class="layui-nav-img">我</a>
                    <dl class="layui-nav-child">
                        <dd><a href="/v1/personal">用户信息</a></dd>
                        <dd><a href="/password">修改密码</a></dd>
                        <dd><a href="/loginout">退出</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>

    <div class="layui-row">
        <div><img src="../static/shalou.png"></div>
    </div>

    <div class="layui-row">
        <div class="layui-col-md8 layui-bg-red">
            <ul class="layui-nav layui-bg-gray" lay-filter="">
                <li class="layui-nav-item"><a href="">主页</a></li>
                <li class="layui-nav-item"><a href="">收藏</a></li>
                <li class="layui-nav-item"><a href="">关注</a></li>
                <li class="layui-nav-item"><a href="">历史记录</a></li>
                <li class="layui-nav-item"><a href="">消息中心</a></li>
                <li class="layui-nav-item"><a href="">投稿</a></li>
            </ul>
            <div class="layui-col-md3">
                <div class="layui-panel">
                    <div style="padding: 30px;">一个面板</div>
                  </div> 
            </div>
            <div class="layui-col-md3">
                <div class="layui-panel">
                    <div style="padding: 30px;">一个面板</div>
                  </div> 
            </div>
            <div class="layui-col-md3">
                <div class="layui-panel">
                    <div style="padding: 30px;">一个面板</div>
                  </div> 
            </div>
            <div class="layui-col-md3">
                <div class="layui-panel">
                    <div style="padding: 30px;">一个面板</div>
                  </div> 
            </div>
        </div>
        <div class="layui-col-md4" style="text-align: center;">
            <h1 style="margin: 0 auto;">个人资料</h1>
            <table border="1">
                <tbody>
                    <tr>
                        <td class="label-1">昵称</td>
                        <td id="user-username" class="label-2"></td>
                    </tr>
                    <tr>
                        <td class="label-1">ID</td>
                        <td id="user-id" class="label-2"></td>
                    </tr>
                    <tr>
                        <td class="label-1">性别</td>
                        <td id="user-gender" class="label-2"></td>
                    </tr>
                    <tr>
                        <td class="label-1">生日</td>
                        <td id="user-birth" class="label-2"></td>
                    </tr>
                    <tr>
                        <td class="label-1">地区</td>
                        <td id="user-region" class="label-2"></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>



    <div class="layui-container">
        <div class="layui-row layui-col-space15" id="videoList">
            <!-- Video Blocks will be dynamically added here -->
        </div>
    </div>


    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        // 发起 AJAX 请求

        $(document).ready(function () {
            // 发起 AJAX 请求
            var token = getCookie("token");
            $.ajax({
                url: 'http://43.143.232.128:31000/v1/userinfo/table', // 替换为您的后端接口地址
                method: 'GET',
                headers: {
                    'Authorization': 'Bearer ' + token
                },
                dataType: 'json',
                success: function (response) {
                    // 更新表格中的数据
                    $('#user-username').text(response.data.username);
                    $('#user-id').text(response.data.id);
                    $('#user-gender').text(response.data.gender);
                    $('#user-birth').text(response.data.birth);
                    $('#user-region').text(response.data.region);
                },
                error: function (xhr, status, error) {
                    console.error('AJAX request failed:', status, error);
                }
            });

            function getCookie(name) {
                var value = "; " + document.cookie;
                var parts = value.split("; " + name + "=");
                if (parts.length === 2) return parts.pop().split(";").shift();
            }
        });

    </script>
</body>

</html>